<template>
    <div>
        <video :id="id" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264"
               :poster=posterImg
               data-setup="{}">
            <source src="static/video/mov_bbb.mp4" type='video/mp4' />
        </video>
    </div>
</template>
<style>

</style>
<script>
    export default{
        props: {
            id: {
                type: String,
                default: 'myVideo'
            },
            vWidth: {
                type: Number,
                default: 640
            },
            vHeight: {
                type: Number,
                default: 320
            },
            posterImg: {
                type: String,
                default: 'https://ps.ssl.qhimg.com/sdmt/163_135_100/t01b77a38c118a9967e.jpg'
            }
        },
        data(){
            return{

            }
        },
        components:{

        },
        computed:{

        },
        methods:{

        },
        created(){

        },
        mounted(){
            var player = videojs(this.id,{
                controlBar: {
                    captionsButton: false,
                    chaptersButton : false,
                    liveDisplay:false,
                    playbackRateMenuButton: false,
                    subtitlesButton:false
                }
            });
            // 检测播放时间
            player.on('timeupdate', function () {
                if (player.duration() != 0 && player.currentTime() === player.duration()) {
                    //this.enterFullScreen()
                }
            });
            // 开始或恢复播放
            player.on('play', function() {
                this.play();
            });
            // 暂停播放
            player.on('pause', function() {
                this.pause();
            });


        }
    }
</script>
